<template>
  <div class="app-container calendar-list-container">

    <!-- 搜索栏 -->
    <div class="search__option">
      <div class="search__condition">
        机构名称
        <el-input class="search__input" v-model="params.agencyName" placeholder="请输入机构名称" />
      </div>
      <div class="search__condition">
        所属地区
        <el-cascader class="search__input" change-on-select clearable placeholder="全部" expand-trigger="click" :options="areaCascadeOptions" v-model="params.areaId" />
      </div>
      <div class="search__condition">
        <el-button @click="hanldeSearchData" type="primary">查询</el-button>
      </div>
    </div>

    <!-- 列表 -->
    <el-table border :data="tableData" v-loading="loading" style="width: 100%">
      <el-table-column align="center" prop="agencyName" label="机构名称" />
      <el-table-column align="center" label="机构类型">
        <template slot-scope="{row}">
          {{transType(row.type)}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="推荐">
        <template slot-scope="{row}">
          {{row.recommend==0? '否' : '是'}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态">
        <template slot-scope="{row}">
          {{row.status | tranStatus}}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="area" label="所属地区" />
      <el-table-column align="center" label="操作" width=" 280">
        <template slot-scope="{row}">
          <el-button @click="handleEdit(row.id)" size="small" type="primary">编辑</el-button>
          <el-button @click="handleSetAdmin(row)" size="small" type="primary" :disabled="row.status=='1'">{{!row.hasAccount ? '设置管理员' : '编辑管理员'}}</el-button>
          <el-button @click="hanldeToggleEffect(row)" size="small" type="primary">{{row.status | tranStatus(false)}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination v-show="!loading" class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.pageNo" :page-sizes="[5, 10, 20, 30, 50]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" />

    <!-- 机构编辑 -->
    <organize-edit :editId="editId" :dialog="editDialog" @edit="handleSaveEnd" @cancel="editDialog = false" />

    <!-- 设置管理员 -->
    <create-admin :details="agencyDetails" :dialog="setAdminDialog" @edit="handleSaveEnd" @cancel="setAdminDialog = false" />

  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { getAgencyList, editAgencyEffective, createAgency } from '@/api/organize'
import OrganizeEdit from './components/organizeEdit'
import CreateAdmin from './components/createAdmin'

export default {
  name: 'OrganizeList',
  data() {
    return {
      loading: false,
      editId: null,
      agencyDetails: {},
      editDialog: false,
      setAdminDialog: false,
      total: 0,
      tableData: [],
      params: {
        pageSize: 10,
        pageNo: 1,
        agencyName: '',
        areaId: []
      }
    }
  },

  created() {
    this.searchData()
    this.GetAreaCascadeOptions()
    this.GetOrganizeTypeOptions()
    this.GetUniversityLabelOptions()
  },

  computed: {
    ...mapGetters(['areaCascadeOptions', 'organizeTypeOptions'])
  },

  methods: {
    // 映射 Actions
    ...mapActions(['GetAreaCascadeOptions', 'GetOrganizeTypeOptions', 'GetUniversityLabelOptions']),

    // 列表数据
    searchData() {
      this.loading = true
      this.tableData = []
      getAgencyList(this.transParams())
        .then(({ data = {} }) => {
          this.loading = false
          this.tableData = data.list
          this.total = data.total
        })
        .catch(() => {
          this.loading = false
        })
    },

    // 参数处理
    transParams() {
      const { areaId } = this.params
      return {
        ...this.params,
        areaId: areaId.slice(-1)[0] || ''
      }
    },

    // 机构类型转换
    transType(type) {
      let typeString = ''
      this.organizeTypeOptions.map(({ value, label }) => {
        if (type === value) typeString = label
      })
      return typeString
    },

    // 机构编辑
    handleEdit(id) {
      this.editId = id
      this.editDialog = true
    },

    // 机构状态改变
    hanldeToggleEffect({ id, status }) {
      editAgencyEffective({ agencyId: id, effective: status === '0' ? '1' : '0' })
        .then(() => {
          this.$message({
            message: '修改机构状态成功！',
            type: 'success'
          })
          this.searchData()
        })
    },

    handleSaveEnd() {
      this.editDialog = false
      this.setAdminDialog = false
      this.searchData()
    },

    // 设置管理员
    handleSetAdmin({ id, hasAccount, agencyEmployeesDTO = {} }) {
      if (!id) return
      if (hasAccount) {
        this.agencyDetails = agencyEmployeesDTO
        this.setAdminDialog = true
      } else {
        this.handleCreateAgency(id)
      }
    },

    // 设置管理员
    handleCreateAgency(id) {
      createAgency({ agencyId: id })
        .then(() => {
          this.$message({
            message: '设置管理员成功！',
            type: 'success'
          })
          this.searchData()
        })
    },

    hanldeSearchData() {
      this.params.pageNo = 1
      this.searchData()
    },

    handleSizeChange(size) {
      this.params.pageSize = size
      this.searchData()
    },

    handleCurrentChange(page) {
      this.params.pageNo = page
      this.searchData()
    }
  },

  filters: {
    tranStatus(status, boolean = true) {
      switch (status) {
        case '0':
          return boolean ? '有效' : '无效'
        case '1':
          return boolean ? '无效' : '有效'
        default:
          return ''
      }
    }
  },

  components: {
    OrganizeEdit,
    CreateAdmin
  }
}
</script>

<style lang="scss" scoped>
.search__option {
  margin-bottom: 20px;
  .search__condition {
    display: inline-block;
    padding-right: 10px;
    padding-bottom: 20px;
  }
  .search__input {
    padding-left: 10px;
    width: 200px;
  }
}
.pagination {
  margin-top: 20px;
}
</style>
